/* 今日特价 */
#box .box1{
    width: 1200px;
    height: 400px;
    margin: auto;
    border:1px solid red;
}
#box .box1 .preferential{
    float: left;
    width: 580px;
    height: 400px;
    border:1px solid red;
}
#box .box1 .preferential .top{
    width: 580px;
    height: 60px;
}
#box .box1 .preferential .top p {
    display: inline-block;
}
#box .box1 .preferential .top p:nth-of-type(1){
    font-size: 24px;
    width: 100px;
    margin:10px;
}
#box .box1 .preferential .top p:nth-of-type(2){
    float: right;
    font-size: 20px;
    margin:10px;
}
#box .box1 .preferential .top p a{
    margin:10px;
    cursor:pointer
}
#box .box1 .preferential .top p a:hover{
    color: red;
}
#box .box1 .preferential .buttom{
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(2, 50%);
    width: 580px;
    height: 320px;
}
#box .box1 .preferential .buttom div{
    border: 1px solid red;
}
#box .box1 .preferential .buttom div img{
    float: left;  
    width: 100px;
    height: 100px;
    margin: 15px 5px;
}
#box .box1 .preferential .buttom  .buttom-2 p{
    display: flex;
    flex-direction: column;
    font-size: 14px;
    height: 60px;
    margin-top: 10px;
}
#box .box1 .preferential .buttom .buttom-2 p{
    width: 80px;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#box .box1 .preferential .buttom .buttom-2 p span{
    display: inline-block;
    text-align: center;
    width: 40px;
    height: 40px;
}


#box .box1 .preferential .buttom .buttom-1{
    grid-row-start: 1;
    grid-row-end: 3;  
}
#box .box1 .preferential .buttom .buttom-1 img{
    width: 180px;
    height: 200px;
    margin-top: 5px;
    margin-left: 5px;
    border:1px solid red;
}
 #box .box1 .preferential .buttom .buttom-1 p {
    width: 180px;
    height: 30px;
    margin: auto;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#box .box1 .preferential .buttom .buttom-1 p span{
    display: inline-block;
    padding: 0 10px;
    font-size: 24px;
    color:red;
}
#box .box1 .preferential .buttom .buttom-1 p span:nth-of-type(2){
    color: black;
    font-size: 16px;
    text-decoration: line-through;;
}
/* 
<div class="box1">
    <div class="preferential">
        <div class="top">
            <p>今日特价</p>
            <p><a>精选</a><a>美食</a><a>百货</a><a>个护</a><a>预告</a></p>
        </div>
        <div class="buttom">
            <div class="buttom-1">
                <a href="./html/detail.html"><img src="" /></a>
                <p>你好你好你好你好你好你好你好</p>
                <p><span>￥12</span><span>￥19</span></p>
            </div>
            <div class="buttom-2"><a href="./html/detail.html"><img src="" /></a>
                <p>你好你好你好你好你好你好你好</p>
                <p><span>￥12</span><span>￥19</span></p></div>
            <div class="buttom-2"></div>
            <div class="buttom-2"></div>
            <div class="buttom-2"></div>
        </div>
    </div>
    <div>

    </div>
</div> */
